{% extends 'base/base.html' %}

{% block title %}仪表盘 - 多用户报警系统{% endblock %}

{% block content %}
<div class="mb-4">
    <h1 class="mb-4">
        <i class="fa fa-dashboard" aria-hidden="true"></i> 仪表盘
    </h1>
    
    <div class="row">
        <!-- 欢迎卡片 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h2 class="h4">欢迎回来，{{ user.username }}！</h2>
                </div>
                <div class="card-body">
                    <p class="mb-0">您上次登录时间：{{ user.last_login|date:"Y年m月d日 H:i:s" }}</p>
                    {% if user.phone %}
                        <p class="mb-0">您的手机号：{{ user.phone }}</p>
                    {% endif %}
                    {% if user.email %}
                        <p class="mb-0">您的邮箱：{{ user.email }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 用户统计卡片 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h2 class="h4">我的项目统计</h2>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="p-3 rounded-lg bg-primary bg-opacity-10">
                                <i class="fa fa-folder-open-o" aria-hidden="true" style="font-size: 2rem; color: #1677ff;"></i>
                                <h3 class="h2 mt-2">{{ user_projects.count }}</h3>
                                <p class="text-muted">参与项目</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 rounded-lg bg-success bg-opacity-10">
                                <i class="fa fa-user-circle-o" aria-hidden="true" style="font-size: 2rem; color: #52c41a;"></i>
                                <h3 class="h2 mt-2">{{ user_created_projects.count }}</h3>
                                <p class="text-muted">创建项目</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Webhook消息清单 -->
    <div class="card mb-4">
        <div class="card-header">
            <h2 class="h4 mb-0">
                <i class="fa fa-envelope-o" aria-hidden="true"></i> Webhook消息清单
            </h2>
        </div>
        <div class="card-body">
            {% if webhook_messages %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>所属项目</th>
                                <th>来源</th>
                                <th>IP地址</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for message in webhook_messages %}
                                <tr>
                                    <td>{{ message.timestamp|slice:':19' }}</td>
                                    <td><a href="{% url 'projects:project_detail' message.project.id %}">{{ message.project.name }}</a></td>
                                    <td>{{ message.source|truncatechars:30 }}</td>
                                    <td>{{ message.ip }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="text-center text-muted">暂无Webhook消息数据</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为卡片添加悬停效果
        const cards = document.querySelectorAll('.card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
                this.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.12)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)';
            });
        });
    });
</script>
{% endblock %}